<template>
	<view :style="{display: visible ? 'block' : 'none'}">

		<view class="container">

			<!-- 空白页 -->
			<view v-if="!hasLogin || empty===true" class="empty">
				<image src="/static/emptyCart.jpg" mode="aspectFit"></image>
				<view v-if="hasLogin" class="empty-tips">
					空空如也
					<view @click="goProduct()" class="navigator" v-if="hasLogin" url="/index/index"
						open-type="switchTab">
						随便逛逛>
					</view>
				</view>
				<view v-else class="empty-tips">
					空空如也
					<view class="navigator" @click="navToLogin">去登陆></view>
				</view>
			</view>

			<view v-else>
				<!-- 列表 -->
				<view class="shop-car" style="background-color: #d1181a;">

					<view class="common-car">

						<view class="shop-car">
							<view class="shop-car-header">
								<text @tap="cut">{{isCut?'编辑':'完成'}}</text>
							</view>
							<scroll-view scroll-y="true" :style='"height:"+height+"rpx;"' scroll-with-animation='true'>
								<view class="store-box" v-for="(product,index) in prodectslist" :key="index">

									<view class="goodsInfo">
										<image style="padding-bottom: ;" src="../../static/selected.png" v-if="product.checked == 2"
											class="checked-image" mode="" @tap="productCheck(index,product.checked)">
										</image>
										<image src="../../static/not_select.png" v-else class="checked-image" mode=""
											@tap="productCheck(index,product.checked)"></image>
										<view class="goodsInfo-right">
											<image :src="product.commodityList.icon" class="goods-image" mode="">
											</image>
											<view class="goodsInfo-box">
												<text class="goods-name"
													@click="prodctDetail(product)">{{product.commodityList.commodityName}}</text>
												<text v-if="product.commodityNorms!=null" class="spe">规格：
													<text style="margin-right: 10px;"
														v-for="(item,index) in product.commodityNorms.skuNameArr">{{item}}
													</text>

												</text>


												<view class="goods-box">
													<text v-if="product.commodityNorms!=null"
														class="goods-price">¥{{priceFilter(product.commodityNorms.sellingPrice)}}</text>
													<view class="goods-num-box">
														<view class="goods-image" @tap="sub(index,product.quantity)">
															<text>-</text>
														</view>
														<view class="goods-num">
															<text>{{product.quantity}}</text>
														</view>
														<view class="goods-image" @tap="add(index,product.quantity)">
															<text>+</text>
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
					
							</scroll-view>


							<view id="ids" class="statistics-box" :style='"margin-bottom:"+tabbarHeight+"px;"'>
								<view class="statistics">
									<view class="statistics-left" v-if="statisticsIndex" @tap="allCheck">
										<image src="../../static/selected.png" class="checked-image" mode="">
										</image>
										<text>全选</text>
									</view>
									<view class="statistics-left" v-else @tap="allCheck">
										<image src="../../static/not_select.png" class="checked-image" mode="">
										</image>
										<text>全选</text>
									</view>
									<view class="statistics-right" v-if="isCut" @tap="accounts">
										<text>总计：</text><text class="text-color">¥{{priceFilter(total)}}</text>
										<view class="btn">
											<text>结算</text>
										</view>
									</view>
									<view class="statistics-right" v-else @tap="delect">
										<view class="btn">
											<text>删除</text>
										</view>
									</view>
								</view>


							</view>
						</view>

						<slot></slot>
					</view>


				</view>

			</view>

		</view>



	</view>

</template>

<script>
	import {
		getCartList,
		editCart,
		deleteCart
	} from "@/server/product.js"
	import {
		mapState
	} from 'vuex';

	export default {
		props: {
			visible: Boolean,
			tabbarHeight: Number,
			
		},
		components: {

		},
		data() {
			return {
				total: 0,
				allChecked: false,
				empty: true, //空白页现实  true|false
				prodectslist: [],
				iPhoneX: false,
				datas: {},
				countHeight:0,

				statisticsIndex: false,
				total: 0,
				isCut: true,
				height: 0,
				selectProductsList: []
			};
		},
		onLoad() {
       this.tabbarHeight+=50


		},
		//index.vue页面
		onReady() {

		},

		created() {

			let that = this;
			uni.$on("changeCart", () => {
				getCartList().then(data => {

					uni.hideLoading()

					if (data.total == 0) {
						this.empty = true;
					} else {
						this.empty = false;
						data.list.forEach((item, index) => {
							item.checked = 1
						})
						this.prodectslist = data.list
						this.infoScroll();
					}

				})
			})
			uni.showLoading({
				title: '加载中'
			});
			getCartList().then(data => {
				uni.hideLoading()
				if (data.total == 0) {
					this.empty = true;
				} else {
					this.empty = false;
					data.list.forEach((item, index) => {
						item.checked = 1
					})
					this.prodectslist = data.list
					setTimeout(function() {
						that.infoScroll();
					}, 10)
				}
			}).catch((data) => {
				uni.hideLoading()
				this.$api.msg(data);
			})



		},

		watch: {
			//显示空白页
			cartList(e) {
				let empty = e.length === 0 ? true : false;
				if (this.empty !== empty) {
					this.empty = empty;
				}
			}
		},
		computed: {
			...mapState(['hasLogin']),
		},
		mounted() {
      
			
		
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.statistics-box').boundingClientRect((res) => {
					console.log("%%%%%%%%")
					console.log()
					console.log(res)
			
				this.countHeight=res.height+this.tabbarHeight 
				console.log("^^^^^^^^^^")
					console.log(this.countHeight)
					this.box = res;
				
				}).exec();
			}, 300);
		},
		methods: {
			infoScroll: function() {
				let that = this;
				//设置商品列表高度
				uni.getSystemInfo({
					success: function(res) {
						that.height = (res.windowHeight) * (750 / res.windowWidth) - 240;
					},
				});


			},
			priceFilter(n = 0) {
				let that = this;
				if (typeof n == "string") {
					n = parseFloat(n);
				}
				if (that.amountType === 0) {
					return n.toFixed(2);
				} else {
					return (n / 100).toFixed(2);
				}
			},
			//跳转到首页，去逛逛商品
			goProduct() {
				uni.$emit("active", {
					dorm: "home"
				})
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			prodctDetail(item) {
				uni.navigateTo({
					url: `/pages/product/product?type=2&product=` + encodeURIComponent(JSON.stringify(item))
				})
			},
			modifyCart(index) {
				uni.showLoading({
					title: '修改中'
				});
				let param = {
					"id": this.prodectslist[index].id,
					"norms_id": this.prodectslist[index].norms_id,
					"quantity": this.prodectslist[index].quantity
				}
				console.log("^^^^^^^^^^^^")
				console.log(param)
				editCart(param).then(data => {
					uni.hideLoading()
					this.$api.msg(`修改成功`);
				})
			},
			//商品选择
			productCheck(index, productChecked) {
				if (productChecked === undefined) {
					console.log("*选择" + productChecked)
					this.prodectslist[index].checked = 1
				}


				if (productChecked == 1) {
					this.prodectslist[index].checked = 2
				} else {
					this.prodectslist[index].checked = 1
				}
				//判断是否全选
				let statisticsIndex = true
				this.prodectslist.find((item, index) => {
					if (item.checked == 1) {
						statisticsIndex = false
					}
				})
				if (statisticsIndex == false) {
					this.statisticsIndex = false
				} else {
					this.statisticsIndex = true
				}

				this.statistics()
			},

			//减少
			sub(index, productnum) {
				if (productnum == 1) {
					return
				} else {
					this.prodectslist[index].quantity--
				}
				this.modifyCart(index)
				this.statistics()
			},
			//增加
			add(index, productnum, item) {
				this.prodectslist[index].quantity++
				this.modifyCart(index)
				this.statistics()
			},
			//全选
			allCheck() {
				if (this.statisticsIndex) {
					this.prodectslist.find((item, index) => {
						item.checked = 1

					})
					this.statisticsIndex = false
				} else {
					this.prodectslist.find((item, index) => {
						item.checked = 2

					})
					this.statisticsIndex = true
				}
				this.statistics()
			},
			//统计
			statistics() {
				let total = 0
				this.prodectslist.find((item, index) => {
					if (item.checked == 2) {
						total = total + item.commodityNorms.sellingPrice * item.quantity
					}
				})
				this.total = total.toFixed(2)
			},
			cut() {
				this.isCut = !this.isCut
				this.statisticsIndex = true
				this.allCheck()
			},
			accounts() {
				this.selectProductsList = [],
					this.prodectslist.forEach((item, index) => {
						if (item.checked == 2) {
							this.selectProductsList.push(item)
						}
					})
				if (this.selectProductsList.length > 0) {
					console.log("选中的商品")
					console.log(this.selectProductsList)
					uni.navigateTo({
						url: '/pages/order/createOrder?selectProductsList=' + encodeURIComponent(JSON.stringify(
							this.selectProductsList))
					})
				} else {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					})
				}
			},
			delect() {
				uni.showLoading({
					title: '删除中'
				});
				let ids = []
				this.prodectslist.find((item, index) => {
					if (item.checked == 2) {
						ids.push(item.id)
					}
				})
				deleteCart(ids.toString()).then(data => {
					uni.hideLoading();
					this.$api.msg(`删除成功`);
					this.isCut = !this.isCut
					console.log(ids)
					ids.forEach((id, index) => {
						let indexs = this.prodectslist.findIndex(val => val.id === id);
						this.prodectslist.splice(indexs, 1)
					})

				})

			},

			//请求数据
			navToLogin() {

				uni.navigateTo({
					url: '/pages/public/login'
				})
			},
		}
	}
</script>

<style lang='scss'>
	.shop-car {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #F5F5F5;
	}

	.container {
		background-color: #FFFFFF;
		margin-bottom: 134upx;
		/* padding-bottom: 134upx; */

		/* 空白页 */
		.empty {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100vh;
			padding-bottom: 100upx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			background: #fff;

			image {
				width: 240upx;
				height: 160upx;
				margin-bottom: 30upx;
			}

			.empty-tips {
				display: flex;
				font-size: $font-sm+2upx;
				color: $font-color-disabled;

				.navigator {
					color: $uni-color-primary;
					margin-left: 16upx;
				}
			}
		}
	}

	/* 购物车列表项 */
	.cart-item {
		display: flex;
		position: relative;
		padding: 30upx 40upx;
		border-radius: 10px;
		margin: 10px;
		background-color: #FFFFFF;

		.image-wrapper {
			width: 230upx;
			height: 230upx;
			flex-shrink: 0;
			position: relative;

			image {
				border-radius: 8upx;
			}
		}

		.checkbox {
			position: absolute;
			left: -16upx;
			top: -16upx;
			z-index: 8;
			font-size: 44upx;
			line-height: 1;
			padding: 4upx;
			color: $font-color-disabled;
			background: #fff;
			border-radius: 50px;
		}

		.item-right {
			display: flex;
			flex-direction: column;
			flex: 1;
			overflow: hidden;
			position: relative;
			padding-left: 30upx;

			.title,
			.price {
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				height: 40upx;
				line-height: 40upx;
			}

			.attr {
				font-size: $font-sm + 2upx;
				color: $font-color-light;
				height: 50upx;
				line-height: 50upx;
			}

			.price {
				height: 50upx;
				line-height: 50upx;
			}
		}

		.del-btn {
			padding: 4upx 10upx;
			font-size: 34upx;
			height: 50upx;
			color: $font-color-light;
		}
	}

	/* 底部栏 */
	.action-section {
		border-radius: 1px;
		/* #ifdef H5 */
		margin-bottom: 100upx;
		/* #endif */
		position: fixed;
		left: 0upx;
		bottom: 0upx;
		z-index: 95;
		display: flex;
		align-items: center;
		width: 100%;
		height: 100upx;
		padding: 50upx 20upx;
		background: rgba(255, 255, 255, 1.0);
		/* 	box-shadow: 0 0 20upx 0 rgba(0,0,0,.5); */
		border-radius: 16upx;

		.checkbox {
			height: 52upx;
			position: relative;

			image {
				width: 52upx;
				height: 100%;
				position: relative;
				z-index: 5;
			}
		}

		.clear-btn {
			position: absolute;
			left: 1upx;
			top: 0;
			z-index: 4;
			width: 0;
			height: 52upx;
			line-height: 52upx;
			padding-left: 50upx;
			font-size: $font-base;
			color: #fff;
			background: $font-color-disabled;
			border-radius: 90px;
			opacity: 0;
			transition: .2s;

			&.show {
				opacity: 1;
				width: 140upx;
			}
		}

		.total-box {
			flex: 1;
			display: flex;
			flex-direction: column;
			text-align: right;
			padding-right: 40upx;

			.price {
				font-size: $font-lg;
				color: $font-color-dark;
			}

			.coupon {
				font-size: $font-sm;
				color: $font-color-light;

				text {
					color: $font-color-dark;
				}
			}
		}

		.confirm-btn {
			padding: 0 38upx;
			border-radius: 100px;

			height: 66upx;
			line-height: 66upx;
			font-size: $font-base + 2upx;
			background: rgba(252, 2, 8, 1.0);

		}
	}

	/* 复选框选中状态 */
	.action-section .checkbox.checked,
	.cart-item .checkbox.checked {
		color: $uni-color-primary;
	}
</style>
<style lang="scss" scoped>
	.common-car {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #F5F5F5;
	}

	.empty-shop-car {
		width: 750rpx;
		min-height: 680rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.empty-shop-car-image {
			width: 340rpx;
			height: 278rpx;
			margin-top: 102rpx;
		}

		text {
			margin-top: 40rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
		}

		.empty-shop-car-btn {
			width: 240rpx;
			height: 90rpx;

			background: #fa4940;
			border-radius: 200rpx;
			margin-top: 40rpx;
			text-align: center;
			line-height: 90rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: #313133;
		}
	}

	.shop-car {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.shop-car-header {
			width: 690rpx;
			height: 80rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;

			text {
				font-size: 28rpx;
				font-weight: 400;
				color: #313133;
			}
		}

		.store-box {
			width: 750rpx;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #FFFFFF;

			.store-header {
				width: 690rpx;
				height: 78rpx;
				padding: 0 30rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #313133;

				.checked-image {
					width: 36rpx;
					height: 36rpx;
				}

				text {
					font-size: 28rpx;
					font-weight: 400;
					color: #313133;
					margin-left: 20rpx;
				}

				.label {
					width: 14rpx;
					height: 24rpx;
					margin-left: 10rpx;
					margin-top: 5rpx;
				}
			}

			.goodsInfo {


				display: flex;
				flex-direction: row;
				align-items: center;
				border-bottom: 2rpx solid #EDEDED;

				&:nth-last-child(1) {
					border: none;
				}

				.checked-image {
					width: 36rpx;
					height: 36rpx;
				}

				.goodsInfo-right {
					width: 634rpx;
					height: 246rpx;
					margin-left: 20rpx;
					display: flex;
					flex-direction: row;
					align-items: center;

					.goods-image {
						width: 180rpx;
						height: 180rpx;
					}

					.goodsInfo-box {
						width: 428rpx;
						margin-left: 24rpx;
						display: flex;
						flex-direction: column;
						align-items: center;

						.goods-name {
							width: 428rpx;
							font-size: 26rpx;
							font-weight: 400;
							color: #313133;
							 display: -webkit-box;
							  overflow: hidden;
							  text-overflow: ellipsis;
							  word-wrap: break-word;
							  white-space: normal !important;
							  -webkit-line-clamp: 2;
							  -webkit-box-orient: vertical;
						}

						.spe {
							width: 428rpx;
							margin-top: 10rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #919298;
						}

						.goods-box {
							width: 428rpx;
							margin-top: 18rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: space-between;

							.goods-price {
								font-size: 32rpx;
								font-weight: 400;
								color: #313133;
							}

							.goods-num-box {
								width: 168rpx;
								height: 46rpx;
								display: flex;
								flex-direction: row;
								align-items: center;

								.goods-image {
									width: 46rpx;
									height: 44rpx;
									text-align: center;
									line-height: 44rpx;
									border: 1rpx solid #CFCFCF;
									font-size: 38rpx;
								}

								.goods-num {
									width: 76rpx;
									height: 44rpx;
									text-align: center;
									line-height: 44rpx;
									font-size: 33rpx;
									font-weight: 400;
									color: #666666;
									border-top: 1px solid #CFCFCF;
									border-bottom: 1px solid #CFCFCF;
								}
							}
						}
					}
				}
			}
		}

		.statistics-box {
			width: 750rpx;
			display: flex;


			flex-direction: column;
			align-items: center;
			background-color: #FFFFFF;
			position: fixed;

			bottom: 0;

			.statistics {
				width: 720rpx;
				padding: 0 0 0 30rpx;
				height: 98rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				.statistics-left {
					width: 120rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;

					image {
						width: 36rpx;
						height: 36rpx;
					}

					text {
						font-size: 30rpx;
						font-weight: 400;
						color: #313133;
					}
				}

				.statistics-right {
					width: 600rpx;
					height: 50rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-end;

					.btn {
						padding: 6px 60upx;
						border-radius: 100px;
						background: rgba(252, 2, 8, 1.0);
						text-align: center;

						font-size: 30rpx;
						font-weight: 400;
						color: #FFFFFF;
						margin-left: 40rpx;
					}

					text {
						font-size: 30rpx;
						font-weight: 500;
						color: #FFFFFF;
					}

					.text-color {
						color: rgba(242, 18, 18, 1);
					}
				}
			}

			.gap {

				width: 750rpx;
				height: 80rpx;
			}
		}
	}
</style>
